<template>
  <div class="c-flex-row c-flex-center">
    <div class="operation-button sub-button c-flex-row c-flex-center" @click="clickSub" :class="[addSubClass ? addSubClass : '',inputNumber > min ? 'c-fc-xblack':'disabled-click', iconClass]"><span class="iconfont icon-subtract"></span></div>
    <input type="text" pattern="[0-9]*" class="c-fc-xblack" @focus="inputFocus" v-model="inputNumber" v-on:input="changeInputNum" v-on:blur="finishInput" :class="[inputClass ? inputClass : '', numberClass]" :disabled="inputNumber > max" />
    <div class="operation-button add-button c-flex-row c-flex-center" @click="clickAdd" :class="[addSubClass ? addSubClass : '',inputNumber >=max ? 'disabled-click c-fc-xblack':'', iconClass]"><span class="iconfont icon-add"></span></div>
  </div>
</template>

<script>
let inputScrollTop = 0;
export default {
  name: "ShopNumber",
  props: {
    itemIndex: {
      type: Number,
      default: 0
    },
    max: {
      //输入框最大值
      type: Number,
      default: 99
    },
    min: {
      //输入框最小值
      type: Number,
      default: 1
    },
    addSubClass: {
      //加减的样式
      type: String,
      default: ""
    },
    inputClass: {
      //输入框样式
      type: String,
      default: ""
    },
    inputNum: {
      //绑定的输入框的值
      type: Number,
      default: 1
    },
    isLimitBuy: {
      // 是否是商城限购
      type: Number,
      default: -1
    },
    limitNumber: {
      // 商城限购数量
      type: Number,
      default: 0
    },
    purchasedNum: {
      // 用户已购买数量
      type: Number,
      default: 0
    },
    canInputMin: {
      type: Boolean,
      default: false
    },
    numberClass: {
      type: String,
      default: 'c-bg-f4f5f7 c-fc-xblack'
    },
    iconClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputNumber: 1
    };
  },
  deactivated() {
    this.inputNumber = 1;
  },
  watch: {
    itemIndex: {
      handler(newNum, oldNum) {
        this.inputNumber = this.min;
      },
      immediate: true
    },
    inputNum: {
      handler(newNum, oldNum) {
        this.inputNumber = newNum;
      },
      immediate: true
    },
  },
  activated() {
    this.inputNumber = this.inputNum;
  },

  methods: {
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    },
    clickSub(e) {
      if (this.inputNumber <= this.min) {
        this.inputNumber = this.min;
        return;
      }
      this.inputNumber--;
      let itemText = {
        inputNumber: this.inputNumber,
        itemIndex: this.itemIndex
      };
      this.$emit("subNum", itemText);
      // this.$emit("subNum", this.itemIndex);
    },
    clickAdd(e) {
      if (this.inputNumber >= this.max) {
        // this.inputNumber = this.max;
        if (this.isLimitBuy != -1) {
          this.$emit("outMaxNum", this.limitNumber, this.purchasedNum, this.inputNumber);
        }
        return;
      }
      this.inputNumber++;
      let itemText = {
        inputNumber: this.inputNumber,
        itemIndex: this.itemIndex
      };
      this.$emit("addNum", itemText);
      // this.$emit("addNum", this.itemIndex);
    },
    changeInputNum(e) {
      this.inputNumber = e.target.value.replace(/[^0-9]/g, "");
      if (this.inputNumber >= this.max) {
        this.inputNumber = this.max;
      } else if ((this.inputNumber <= this.min && this.inputNumber != '' && !this.canInputMin) || (this.inputNumber == '')) {
        this.inputNumber = this.min;
      }
      let itemText = {
        inputNumber: this.inputNumber,
        itemIndex: this.itemIndex
      };
      this.$emit("inputChange", itemText);
    },
    finishInput(e) {
      this.inputNumber = e.target.value.replace(/[^0-9]/g, "");
      if (this.inputNumber >= this.max) {
        this.inputNumber = this.max;
      } else if ((this.inputNumber <= this.min && this.inputNumber != '' && !this.canInputMin) || (this.inputNumber == '')) {
        this.inputNumber = this.min;
      }
      let itemText = {
        inputNumber: this.inputNumber,
        itemIndex: this.itemIndex
      };
      this.$emit("finishInput", itemText);
      setTimeout(() => {
        document.body.scrollTop = inputScrollTop - 1 || 0;
      });
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
  display: flex;
  display: -webkit-flex;
}
.operation-button {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  cursor: pointer;
  text-align: center;
  font-size: 0.6rem;
}
.sub-button {
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.add-button {
  border-top-right-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}

.disabled-click {
  color: #ccc;
}
input {
  width: 1.3rem;
  height: 0.8rem;
  text-align: center;
  font-size: 0.5rem;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0.2rem;
  border: 0;
}
input:focus {
  outline: none;
  -webkit-appearance: none;
}
</style>
